<script lang="ts" setup>
/**
 * 自定义图标组件
 * 用于封装和简化 Iconify 图标库的使用
 */
 
import { computed } from 'vue';
import { Icon as IconifyIcon } from '@iconify/vue';

// 定义组件 props
interface Props {
  icon: string;
  size?: number | string;
  color?: string;
  class?: string;
}

// 定义组件 props 默认值
const props = withDefaults(defineProps<Props>(), {
  size: 16,
  color: 'inherit',
});

// 定义组件图标组件
const iconComponent = IconifyIcon;

// 定义组件图标类名，用于添加自定义样式
const iconClass = computed(() => {
  return [
    props.class,
    {
      icon: true,
    },
  ];
});

// 定义组件图标样式，用于设置图标大小和颜色
const iconStyle = computed(() => {
  return {
    fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size,
    color: props.color,
  };
});
</script>

<!-- 自定义图标组件模板 -->
<template>
  <component :is="iconComponent" :icon="props.icon" :class="iconClass" :style="iconStyle" />
</template>

<!-- 自定义图标组件样式 -->
<style scoped>
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>
